<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Slides - Vertical</title>

  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>

<body>
  <ion-app>
    <ion-content id="content">
      <ion-slides pager>
        <ion-slide style="background: #24a5a3; color: white;">
          <h1>Slide 1</h1>
        </ion-slide>
        <ion-slide style="background: #a52466; color: white;">
          <h1>Slide 2</h1>
        </ion-slide>
        <ion-slide style="background: #24a562; color: white;">
          <h1>Slide 3</h1>
        </ion-slide>
      </ion-slides>
    </ion-content>

  </ion-app>

  <script>
    const slides = document.querySelector('ion-slides');

    slides.options = {
      direction: 'vertical'
    };
  </script>

  <style>
    /* Important is required due to slides being scoped */
    ion-slides {
      --bullet-background-active: white !important;
    }
  </style>
</body>

</html>
